<template>
	<view class="container">
		<!-- 顶部统计 -->
		<view class="stats-section">
			<view class="stats-card">
				<view class="stats-title">已邀请用户</view>
				<view class="stats-value">{{userinfo.inviteCount || 0}}人</view>
			</view>
			<view class="stats-card">
				<view class="stats-title">已获得奖励</view>
				<view class="stats-value">{{totalReward || 0}}元</view>
			</view>
		</view>

		<!-- 成就列表 -->
		<view class="achievement-list">
			<view v-for="(item, index) in achievements" :key="index" class="achievement-item" 
				:class="{'achieved': item.status > 0, 'claimed': item.status === 2}">
				<view class="achievement-content">
					<view class="achievement-icon">
						<image :src="'/static/images/achievements/'+ (item.status > 0 ? 'achieved' : 'locked') +'.png'" mode="aspectFit"></image>
					</view>
					<view class="achievement-info">
						<view class="achievement-name">{{item.name}}</view>
						<view class="achievement-desc">邀请{{item.requirement}}位新用户</view>
						<view class="achievement-progress">
							<progress :percent="(userinfo.inviteCount/item.requirement)*100" stroke-width="3" 
								:activeColor="item.status > 0 ? '#4CD964' : '#2B85E4'" backgroundColor="#eee"/>
							<text class="progress-text">{{userinfo.inviteCount}}/{{item.requirement}}</text>
						</view>
					</view>
					<view class="achievement-reward">
						<view class="reward-amount">{{item.reward}}元</view>
						<view class="claim-btn" v-if="item.status === 1" @click="claimReward(item)">
							领取奖励
						</view>
						<view class="claim-status" v-else-if="item.status === 2">已领取</view>
						<view class="claim-status locked" v-else>未达成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userinfo: {
				inviteCount: 0,
				totalReward: 0
			},
			achievements: [
				{ id: 1, name: '初邀尝试', requirement: 1, reward: 10, status: 0 },
				{ id: 2, name: '开拓先锋', requirement: 2, reward: 20, status: 0 },
				{ id: 3, name: '社交新秀', requirement: 5, reward: 50, status: 0 },
				{ id: 4, name: '社交先锋', requirement: 10, reward: 100, status: 0 },
				{ id: 5, name: '社交高手', requirement: 15, reward: 150, status: 0 },
				{ id: 6, name: '社交达人', requirement: 20, reward: 300, status: 0 },
				{ id: 7, name: '社交精英', requirement: 30, reward: 450, status: 0 },
				{ id: 8, name: '社交之星', requirement: 40, reward: 600, status: 0 },
				{ id: 9, name: '社交大使', requirement: 50, reward: 750, status: 0 },
				{ id: 10, name: '社交统领', requirement: 60, reward: 900, status: 0 },
				{ id: 11, name: '社交领袖', requirement: 75, reward: 1500, status: 0 },
				{ id: 12, name: '社交传奇', requirement: 90, reward: 1800, status: 0 },
				{ id: 13, name: '社交帝王', requirement: 120, reward: 2400, status: 0 },
				{ id: 14, name: '社交神话', requirement: 150, reward: 3600, status: 0 },
				{ id: 15, name: '超脑无双', requirement: 200, reward: 6000, status: 0 }
			]
		}
	},
	computed: {
		// 计算已达成成就数量
		achievedCount() {
			return this.achievements.filter(item => item.status > 0).length;
		},
		// 计算可领取成就数量
		claimableCount() {
			return this.achievements.filter(item => item.status === 1).length;
		}
	},
	onLoad() {
		this.getAchievementList();
	},
	onPullDownRefresh() {
		this.getAchievementList();
	},
	methods: {
		// 获取成就列表
		getAchievementList() {
			var info = uni.getStorageSync("userinfo");
			if (!info.token) {
				return uni.navigateTo({
					url: '/pages/login/login'
				});
			}

			let timestamp = this.helper.now();
			let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
			
			uni.showLoading({
				title: '加载中'
			});
			
			this.helper.req({
				api: "getAchievementList",
				timestamp: timestamp,
				data: { token: info.token },
				header: { sign: sign },
				method: 'GET',
			}).then(res => {
				if (res.code === 0) {
					// 更新成就列表状态
					this.achievements = res.data.list;
					// 更新用户信息
					this.userinfo = res.data.userinfo;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
				uni.hideLoading();
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.hideLoading();
				uni.stopPullDownRefresh();
			});
		},
		
		// 领取奖励
		claimReward(achievement) {
			if (achievement.status !== 1) return;
			
			var info = uni.getStorageSync("userinfo");
			if (!info.token) {
				return uni.navigateTo({
					url: '/pages/login/login'
				});
			}
			
			uni.showModal({
				title: '领取奖励',
				content: `确认领取${achievement.name}的${achievement.reward}元红包奖励？`,
				success: (res) => {
					if (res.confirm) {
						let timestamp = this.helper.now();
						let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
						
						uni.showLoading({
							title: '领取中'
						});
						
						this.helper.req({
							api: 'receiveAchievementBonus',
							timestamp: timestamp,
							data: {
								token: info.token,
								achId: achievement.id
							},
							header: { sign: sign },
							method: 'POST'
						}).then(res => {
							uni.hideLoading();
							
							if (res.code === 0) {
								// 更新成就状态
								achievement.status = 2;
								// 更新总奖励金额
								this.userinfo.totalReward += achievement.reward;
								
								uni.showToast({
									title: '领取成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						}).catch(() => {
							uni.hideLoading();
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	min-height: 100vh;
	background-color: #ddeafd;
}

.stats-section {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40rpx;
	
	.stats-card {
		flex: 1;
		margin: 0 20rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		text-align: center;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		
		.stats-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 10rpx;
		}
		
		.stats-value {
			font-size: 40rpx;
			color: #2B85E4;
			font-weight: bold;
		}
	}
}

.achievement-list {
	.achievement-item {
		margin-bottom: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		
		&.achieved {
			border: 2rpx solid #4CD964;
		}
		
		&.claimed {
			opacity: 0.8;
		}
		
		.achievement-content {
			padding: 30rpx;
			display: flex;
			align-items: center;
			
			.achievement-icon {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.achievement-info {
				flex: 1;
				
				.achievement-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.achievement-desc {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 20rpx;
				}
				
				.achievement-progress {
					position: relative;
					
					progress {
						width: 100%;
					}
					
					.progress-text {
						position: absolute;
						right: 0;
						top: -40rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.achievement-reward {
				text-align: center;
				margin-left: 30rpx;
				
				.reward-amount {
					font-size: 28rpx;
					color: #f0ad4e;
					margin-bottom: 10rpx;
				}
				
				.claim-btn {
					padding: 10rpx 30rpx;
					background: #2B85E4;
					color: #fff;
					border-radius: 30rpx;
					font-size: 26rpx;
				}
				
				.claim-status {
					font-size: 26rpx;
					color: #4CD964;
					
					&.locked {
						color: #999;
					}
				}
			}
		}
	}
}
</style>
